<template>
    <div>
        <h1>显示分页查询</h1>
        <a href="Add">添加</a>
        <br>
        房号:<input type="text" v-model="paeg.houseHao">
        房号名称:<input type="text" v-model="paeg.houseName">
        <input type="button" value="查" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>房间号</td>
                    <td>房间名称</td>
                    <td>手机号</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{m.houseHao}}</td>
                    <td>{{m.houseName}}</td>
                    <td>{{m.housePoen}}</td>
                    <td> <input type="button" value="修改" @click="upda(m.houseId)"></td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="fen(1)">
        <input type="button" value="上一页" @click="fen(2)">
        <input type="button" value="下一页" @click="fen(3)">
        <input type="button" value="尾页" @click="fen(4)">
        一共{{prcounts.prcount}}条，一共{{prcounts.count}}页，当前第{{paeg.pageindex}}页，每页{{paeg.pagesize}}条
        <select @change="tishu" v-model="paeg.pagesize">
            <option>2</option>
            <option>3</option>
            <option>5</option>
        </select>
        <input type="text" v-model="paeg.pageindex">
        <input type="button" value="跳转" @click="zhuan">
    </div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();
const upda=(houseId:number)=>{
    router.push({path:'Update',query:{houseId:houseId}})
}
const Fan=(houseId:number)=>{
    router.push({path:'Update',query:{houseId:houseId}})
}
const fen=(e:any)=>{
    if(e==1)
    {
        paeg.value.pageindex=1;
        Show();
    }
    if(e==2)
    {
        if(paeg.value.pageindex>1)
        {
            paeg.value.pageindex-=1;
            Show();
        }
    }
    if(e==3)
    {
        if(paeg.value.pageindex<prcounts.value.prcount)
        {
            paeg.value.pageindex+=1;
            Show();
        }
    }
    if(e==4)
    {
        paeg.value.pageindex=prcounts.value.prcount;
        Show();
    }
}
const paeg=ref({
    pageindex:1,
    pagesize:2,
    houseHao:"",
    houseName:""
})
const prcounts=ref({
    count:0,
    prcount:0
})
const tishu=()=>{
    Show();
}
const zhuan=()=>{
    Show();
}
onMounted(() => {
    Show();
}),(()=>{
    Show();
})
const data=ref([{
    "houseId": 0,
    "userName": "",
    "userPwd": "",
    "houseHao": "",
    "houseName": "",
    "housePoen": "",
    "houseSex": ""
}])
const Show=()=>{
    axios.get("https://localhost:7187/api/HouseNum/Show",{params:paeg.value}).then(res=>{
        data.value=res.data.data;
        prcounts.value.count=res.data.count;
        prcounts.value.prcount=Math.ceil(res.data.count/paeg.value.pagesize);
    })
}
</script>

<style scoped>

</style>